<template>
  <!--搜索框中的 垃圾详情页面 -->
  <div id="app">
    <!-- 背景图片 -->
    <div class="Images">
      <img src="../img/首页/u19.png" />
    </div>
    <!-- 头部 -->
    <div class="head">
      <span @click="back"> <van-icon name="arrow-left" /></span>
      <span> {{ this.$route.query.name }} </span>
    </div>
    <!-- 白色背景 -->
    <div class="White">
      <!-- 详情内容区域 -->
      <div class="content">
        <p>
          <span>{{this.$route.query.type1}}</span> <br />
          <span>湿垃圾</span>
        </p>
        <p>
          <span>塑料杯</span> <br />
          <span>干垃圾</span>
        </p>
        <p>
          <span>吸管</span> <br />
          <span>干垃圾</span>
        </p>
        <p>
          <span>指导意见</span> <br />
          <span>第一步:先将剩余的倒入下水道;</span> <br />
          <span>第二步：将珍珠、水果肉等残渣丢入湿垃圾;</span> <br />
          <span>第三部：将被子、吸管丢入干垃圾;</span>
        </p>
      </div>
    </div>
    <!-- 奶茶图片 -->
    <div class="NaiCha">
      <img :src="this.$route.query.type" alt="" />
    </div>
  </div>
</template>

<script setup>
import "../assets/font-icon/iconfont.css";
import { useRouter } from "vue-router";
import { ExchangeInfo } from "../stores/ExchangeOrder";

defineProps({
  name: {
    type: String,
    default: "珍珠奶茶",
  },
});

const router = useRouter();
// console.log(router.currentRoute.value.query.name)
const back = () => {
  router.go(-1);
};
</script>

<style lang="less" scoped>
#app {
  .Images {
    position: relative;
  }
  .head {
    position: absolute;
    top: 20px;
    left: 20px;
    span {
      font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
      color: #ffffff;
      text-align: left;
    }
    span:nth-of-type(2) {
      position: absolute;
      width: 100px;
      left: 30px;
    }
  }
  .White {
    position: absolute;
    top: 130px;
    left: 0;
    height: 80%;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    .content {
      position: absolute;
      top: 70px;
      left: 20px;
      p {
        span:nth-of-type(1) {
          padding-left: 5px;
          border-left: 3px solid red;
          display: inline-block;
          margin-bottom: 15px;
          font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
          font-weight: 700;
          font-style: normal;
          font-size: 14px;
          text-align: left;
        }
        span:nth-of-type(2),
        span:nth-of-type(3),
        span:nth-of-type(4) {
          font-family: "微软雅黑";
          font-weight: 400;
          font-style: normal;
          font-size: 12px;
          text-align: left;
        }
        margin-bottom: 30px;
      }
    }
  }
  .NaiCha {
    position: absolute;
    top: 50px;
    right: 20px;
    width: 140px;
    height: 140px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
